<!--vue模板-->
<template>
  <div>
    <!--添加/修改-->
    <el-dialog v-model="add" title="基础信息" ref="addForm" :title="freight.id ? '修改货代信息' : '添加货代信息'"
      :close-on-click-modal="false">
      <el-form :model="freight" :rules="rules">
        <el-form-item label="账号: " class="ipt" prop="account">
          <el-input v-model="freight.account" placeholder="请输入" @blur="chk" :disabled="!!freight.id" />
        </el-form-item>
        <el-form-item label="密码: " class="ipt" prop="password">
          <el-input v-model="freight.password" type="password" :disabled="!!freight.id" />
        </el-form-item>
        <el-form-item label="货代公司名称: " class="ipt">
          <el-input v-model="freight.freight_forwarding_company" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人: " class="ipt">
          <el-input v-model="freight.contact_person" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话: " class="ipt">
          <el-input v-model="freight.telephone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="邮箱: " class="ipt">
          <el-input v-model="freight.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="运输方式:" class="ipt">
          <el-cascader :options="method" :props="props" clearable v-model="freight.transportation_method"
            placeholder="海运/铁路/公路/空运/多联式/散货" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="擅长航线:" class="ipt">
          <el-cascader :options="airline" :props="props" clearable v-model="freight.route" placeholder="请选择（内销/外销）"
            style="width: 350px;" />
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin: 20px">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="add = false">取消</el-button>
      </div>
    </el-dialog>
    <!--搜索-->
    <div>
      <div style="border: #fff solid 1px;background-color: #fff; ">
        <el-form style="margin-top: 15px;" :model="freights">
          <el-row>
            <el-col :span="6" style="margin-left: 10px;">
              <el-form-item label="货代公司名称 :">
                <el-input v-model="freights.freight_forwarding_company" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">
              <el-form-item label="联系方式 :">
                <el-input v-model="freights.telephone" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left: 10px;">
              <el-form-item label="邮箱 :">
                <el-input v-model="freights.email" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-button style="margin-left: 20px;" type="primary" @click="initData">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-row>
        </el-form>
      </div>
      <!--功能按钮-->
      <div style="text-align: left; margin: 10px">
        <el-button type="primary" @click="openAddDialog">添加</el-button>
      </div>
      <!--客户列表-->
      <el-table :data="tableData" style="width: 100%" stripe border>
        <el-table-column type="index" label="行号" width="80" header-align="center" align="center" />
        <el-table-column prop="id" label="id" width="80" header-align="center" />
        <el-table-column prop="freight_forwarding_company" label="货代公司名称" width="150" header-align="center" />
        <el-table-column prop="contact_person" label="联系人" width="120" header-align="center" />
        <el-table-column prop="telephone" label="联系方式" width="150" header-align="center" />
        <el-table-column prop="email" label="邮箱" width="150" header-align="center" />
        <el-table-column prop="create_time" label="创建时间" width="300" header-align="center" />
        <el-table-column label="操作" header-align="center" align="center">
          <template v-slot="{ row }">
            <el-button type="primary" :icon="Edit" circle title="修改" @click="queryFeright(row.id)" />
            <el-button type="primary">下单记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div style="background-color: #fff; height: 50px; line-height: 50px;">
        <el-pagination background :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper" :total="total"
          @size-change="chgsize" @current-change="chgpg" />
      </div>
    </div>
  </div>
</template>

<!--vue组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
//引入 图标
import { Delete, Edit } from '@element-plus/icons-vue'
//引入api
import { queryFreight, addFreight, getFeright, updateFreight } from "@/api/freight.js";
//引入路由
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { checkUser } from "@/api/sysuser.js";
//表格数据
const tableData = ref([{ freight_forwarding_company: "sa" }]);
//路由实例
const router = useRouter();
//路由信息
const route = useRoute();
//添加客户
const add = ref(false);

//开启多选
const props = { multiple: true };
const method = [
  { label: "海运", value: "海运" },
  { label: "铁路", value: "铁路" },
  { label: "公路", value: "公路" },
  { label: "空运", value: "空运" },
  { label: "多联式", value: "多联式" },
  { label: "散货", value: "散货" },
];

const airline = [
  {
    label: "内销",
    value: "内销",
    children: [
      { label: "中国大陆-香港/澳门/台湾", value: "中国大陆-香港/澳门/台湾" },
    ],
  },
  {
    label: "外销",
    value: "外销",
    children: [
      { label: "中国-北美", value: "中国-北美" },
      { label: "中国-美加", value: "中国-美加" },
      { label: "中国-欧洲", value: "中国-欧洲" },
      { label: "中国-澳大利亚/新西兰", value: "中国-澳大利亚/新西兰" },
      { label: "中国-中南美", value: "中国-中南美" },
      { label: "中国-红海/地中海", value: "中国-红海/地中海" },
      { label: "中国-东南亚", value: "中国-东南亚" },
      { label: "中国-中东/斯波湾", value: "中国-中东/斯波湾" },
      { label: "中国-日本/韩国/俄罗斯", value: "中国-日本/韩国/俄罗斯" },
      { label: "中国-中东/印巴", value: "中国-中东/印巴" },
      { label: "中国-黑海/亚德里亚湾", value: "中国-黑海/亚德里亚湾" },
      { label: "中国-南美东/南美西", value: "中国-南美东/南美西" },
      { label: "中国-欧洲内部", value: "中国-欧洲内部" },
      { label: "中国-东非", value: "中国-东非" },
      { label: "中国-西非", value: "中国-西非" },
      { label: "中国-北非", value: "中国-北非" },
      { label: "中国-南非", value: "中国-南非" },
      { label: "中国-加勒比海", value: "中国-加勒比海" },
      { label: "中国-科隆", value: "中国-科隆" },
      { label: "中国-印巴", value: "中国-印巴" },
    ],
  },
];

//搜索条件
const freights = ref({
  freight_forwarding_company: "",
  telephone: "",
  email: ""
});
//重置
function reset() {
  freights.value = {
    freight_forwarding_company: "",
    telephone: "",
    email: ""
  };
  initData();
}

//表单对象
const freight = ref({
  account: "",
  contact_person: "",
  email: "",
  freight_forwarding_company: "",
  id: "",
  password: "",
  route: "",
  telephone: "",
  transportation_method: ""
});
//表单引用 声明同名引用
const addForm = ref();
//验证规则
const rules = {
  account: [{ required: true, message: '请输入账户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
//判断账号是否存在
async function chk() {
  if (freight.value.account == "") {
    ElMessage.warning({
      message: "请输入账号",
      type: "warning"
    });
    return;//程序返回不在执行
  }
  let rse = await checkUser(freight.value.account);
  if (rse.code == 200) {
    if (rse.data == "yes") {
      ElMessage({
        message: "该账号已存在!",
        type: 'warning'
      });
    }
  }
}
//分页信息
const page = ref(1);//当前页 默认第一页
const pageSize = ref(10);//每页记录数
const total = ref(0);//总记录数

//每页记录数的变更
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从第一页开始查
  page.value = 1;
  //查询数据
  initData();
};
//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
};

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    freight_forwarding_company: freights.value.freight_forwarding_company,
    telephone: freights.value.telephone,
    email: freights.value.email
  };
  let res = await queryFreight(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接受分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}
//查询货代详情
async function queryFeright(id) {
  let res = await getFeright(id);
  if (res.code == 200) {
    // 将 transportation_method 和 route 的 JSON 字符串解析为数组
    if (res.data.transportation_method) {
      res.data.transportation_method = JSON.parse(res.data.transportation_method);
    }
    if (res.data.route) {
      res.data.route = JSON.parse(res.data.route);
    }

    // 将解析后的数据赋值给 freight
    freight.value = res.data;
    add.value = true; // 打开对话框
  }
}
//保存货代信息
async function save() {

  // 将 transportation_method 和 route 转换为 JSON 字符串
  if (freight.value.transportation_method) {
    freight.value.transportation_method = JSON.stringify(freight.value.transportation_method);
  }
  if (freight.value.route) {
    freight.value.route = JSON.stringify(freight.value.route);
  }

  let res;
  if (freight.value.id) {
    // 如果有 id，说明是修改操作
    res = await updateFreight(freight.value);
  } else {
    // 否则是新增操作
    res = await addFreight(freight.value);
  }
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    add.value = false; // 关闭对话框
    initData(); // 重新加载数据
  }
}

function openAddDialog() {
  freight.value = {
    account: "",
    contact_person: "",
    email: "",
    freight_forwarding_company: "",
    id: "",
    password: "",
    route: [],
    telephone: "",
    transportation_method: []
  };
  add.value = true;
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped 当前样式只适用于当前组件-->
<style scoped>
.ipt {
  width: 400px;
  margin-left: 80px;
}
</style>
